<template>
  <div class="breadcrumb" style="padding: 5px 0 10px 0;background-color: white">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index"  :to=" {path: item.path}"> {{ item.meta.menuName }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>

export default {
  name: 'Breadcrumb',
  mounted () {
  },
  computed: {
    routes () {
      return this.$router.options.routes.filter((item) => {
        return item.meta.showInbreadcrumb
      }
      )
    },
    breadcrumb () {
      let matachedArr = this.$route.matched.filter((item) => {
        return item.meta.showInbreadcrumb
      })
      return matachedArr
    }
  }
}
</script>

<style scoped>
  .breadcrumb{
    margin: 20px 30px 10px 30px;
  }
</style>
